<#assign pageTitle="教材_${siteCompany.siteName!}"/>
<#assign pageKeywords = pageTitle />
<#assign pageDescription = pageTitle />
<#assign pageHeader>

</#assign>
<#assign pageContent>
    <van-nav-bar
            title="教材"
            left-text="返回"
            right-text="首页"
            left-arrow
            @click-left="window.history.back();"
            @click-right="window.location.href='/';"
            fixed
            placeholder
    ></van-nav-bar>
    <div class="chooser-wrap">
        <a v-for="(item,index) in categorys"
           :class="[categoryId == item.id?'active':'']"
           @click="clickCategorys(item.id)">
            {{item.name}}
        </a>
    </div>
    <#--<div class="filter-box">
        <div class="fl">
            <span :class="[orderBy == 0?'item active':'item']" @click="clickOrderBy(0)">综合</span>
            <span class="division">|</span>
            <span :class="[orderBy == 1?'item active':'item']"  @click="clickOrderBy(1)">热门</span>
            <span class="division">|</span>
            <span :class="[orderBy == 2?'item active':'item']"  @click="clickOrderBy(2)">销量</span>
        </div>
        <div class="fr">
        </div>
    </div>-->
    <van-pull-refresh v-model="dtRefreshing" @refresh="onRefreshDt" class="main-item">
        <van-list
                v-model="dtLoading"
                :finished="dtFinished"
                :error.sync="error"
                finished-text="没有更多了"
                error-text="请求失败，点击重新加载"
                @load="onLoadDt"
                class="course-list"
        >
            <a v-for="(item,index) in dtList" :key="index"  :href="'/book/view/'+ item.id +'.html'">
                <div class="course-pic"><img v-lazy="item.cover"  alt=""></div>
                <div class="course-info">
                    <div class="course-name text-two">{{item.title}}</div>
                    <div class="course-des text-two">{{item.intro}}</div>
                    <div class="course-time">{{item.categoryName}}</div>
                </div>
            </a>
        </van-list>
        <van-empty description="小编还没有整理内容哦，去看看其它吧" v-if="emptyDoc"/>
    </van-pull-refresh>
</#assign>
<#assign pageScript>
<script src="/static/h5/js/format.js"></script>
<script>
    var channelId = 9 //教材
        , subjectId  = 0 //专业id
        , categoryId  = 0 // 分类id
        , elite = 0 //是否推荐
        , orderBy = 0; //排序
    new Vue({
        el: '#app',
        data() {
            return {
                showFooter: false,
                activeTab:0,
                channelId :channelId,
                subjectId : subjectId,
                categoryId: categoryId,
                orderBy: orderBy,
                categorys: [
                    {id: 0, name: '全部'},
                    {id: 1, name: '室内设计'},
                    {id: 2, name: '广告设计'},
                    {id: 3, name: '动漫设计'},
                    {id: 4, name: '服装设计'}
                ],
                dtList: [],//加载所有内容
                dtLoading: false,
                dtFinished: false,
                dtRefreshing: false,
                dtPage: 0,
                error: false,
                limit: 5,
                showList: false,
                emptyDoc: false
            }
        },
        methods: {
            dateFormat: dateFormat,//格式化日期
            onLoadDt() {
                var _self = this;
                if (_self.dtRefreshing) {
                    _self.dtList = [];
                    _self.dtRefreshing = false;
                }
                _self.dtPage = _self.dtPage + 1;
                _self.dtLoading = true;
                axios.get('/ajax/book/list.json', {
                    params: {
                        page: _self.dtPage,
                        limit: _self.limit,
                        channelId :_self.channelId,
                        subjectId : _self.subjectId,
                        categoryId: _self.categoryId,
                        elite: _self.elite,
                        isFree: _self.isFree,
                        orderBy: _self.orderBy,
                    }
                }).then(function (response) {
                    if (response.data.code === 0) {
                        _self.dtList = _self.dtList.concat(response.data.data);
                        if (response.data.data.length < _self.limit) {
                            _self.dtFinished = true;
                        }
                        if (response.data.data.length == 0 && _self.dtPage < 2) {//初始未请求到数据
                            _self.emptyDoc = true;
                            return
                        }
                    } else {
                        _self.error = true;
                        console.log(response.data.msg);
                    }
                    _self.dtLoading = false;
                }).catch(function (error) {
                    _self.error = true;
                    _self.dtLoading = false;
                    console.log(error);
                });
            },
            clickCategorys(id){
                this.categoryId = id;
                this.onRefreshDt();
            },
            clickOrderBy(orderBy){
                var _self = this;
                _self.orderBy = orderBy
                _self.onRefreshDt();
            },
            onRefreshDt() {
                // 重新加载数据
                let _self = this;
                _self.dtRefreshing = true;
                _self.dtPage = 0;
                _self.dtList = [];
                _self.onLoadDt();
            },
            toView(id) {
                window.location.href = '/album/view/' + id + '.html';
            }
        },
    })
</script>
</#assign>
<#include "../layout_h5.ftl" />